﻿<%@ Page Title="" Language="C#" MasterPageFile="~/HomePage.master" AutoEventWireup="true"
    CodeFile="Album-detail.aspx.cs" Inherits="Album_detail" %>

<%@ Import Namespace="AppCommon" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <title><asp:Literal runat="server" ID="litTitleTop" EnableViewState="False"></asp:Literal> |
        <%= Constants.TITLE_MAIN_PAGE %></title>
    <!--/ facebook meta tag -->
    <meta property="og:title" content="<%= _meta_title %>" />
    <meta property="og:description" content="<%= _meta_description %>" />
    <meta property="og:image" content="<%= _meta_image %>" />
    <meta property="og:url" content="<%= _meta_url %>" />
    <meta property="og:site_name" content="<%= Constants.TITLE_MAIN_PAGE %>" />
    <!--/end facebook meta tag -->
    <!-- google plus meta tag -->
    <meta itemprop="name" content="<%= _meta_title %>" />
    <meta itemprop="description" content="<%= _meta_description %>" />
    <meta itemprop="image" content="<%= _meta_image %>" />
    <!--/ end google plus meta tag -->
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/js/jquery.galleryDetail.js") %>"></script>    
    <link rel="stylesheet" type="text/css" href="<%= Page.ResolveClientUrl("~/css/gallery-detail-style.css") %>" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <!-- tieu de -->
            <h3 class="tieude-tour">                
                <asp:Literal runat="server" ID="litTieude" EnableViewState="False"></asp:Literal>
            </h3>
            <!-- thong tin cap nhat -->
            <p class="gray-color-note">
                <i class="fa fa-calendar"></i>
                <asp:Literal runat="server" ID="litNgaycapnhat" EnableViewState="False"></asp:Literal>                
            </p>
            <div class="google-plus-social">
                <!-- Place this tag where you want the +1 button to render. -->
                <div class="g-plusone" data-size="medium" data-href="<%= linkTour %>">
                </div>
                <a class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true"
                    data-share="true" data-href="<%= linkTour %>"></a>
                <!-- Place this tag after the last +1 button tag. -->
                <script type="text/javascript">
                    window.___gcfg = { lang: 'vi' };
                    (function () {
                        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                        po.src = 'https://apis.google.com/js/platform.js';
                        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                    })();
                </script>
            </div>
            <div id="gallery-img">
                <div class="tn3 album">
                    <ul>
                        <asp:Repeater runat="server" ID="repeaterPhoto">
                            <ItemTemplate>
                                <li>
                                    <asp:Image runat="server" ImageUrl='<%# "~/Upload/AlbumAnh/" + Eval("IdAlbumAnh") + "/" + Eval("AnhDaiDien") %>' AlternateText='<%# Eval("TomTat") %>'/>
                                </li>                                
                            </ItemTemplate>
                        </asp:Repeater>                                                
                    </ul>
                </div>
            </div>
            <div class="desc desc-album">
                <asp:Literal runat="server" ID="litTomtat"></asp:Literal>
                <asp:Literal runat="server" ID="litNoidung"></asp:Literal>
            </div>
            <div class="comment-album">
                <div class="fb-comments" data-href='<%= _meta_url %>' data-numposts="10" data-width="630"
                    data-colorscheme="light">
                </div>
            </div>
        </div>
        <!-- Sider bar -->
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <fx:TourNoiBat runat="server"/>
        </div>
    </div>
    <script>
        var tn1 = $('#gallery-img').tn3({
            skinDir: "skins",
            autoplay: true,
            imageClick: "fullscreen",
            image: {
                maxZoom: 1.5,
                crop: true,
                clickEvent: "dblclick",
                transitions: [{
                    type: "blinds"
                }, {
                    type: "grid"
                }, {
                    type: "grid",
                    duration: 260,
                    easing: "easeInQuad",
                    gridX: 1,
                    gridY: 8,
                    // flat, diagonal, circle, random
                    sort: "random",
                    sortReverse: false,
                    diagonalStart: "bl",
                    // fade, scale
                    method: "scale",
                    partDuration: 360,
                    partEasing: "easeOutSine",
                    partDirection: "left"
                }]
            }
        });
    </script>
</asp:Content>
